<template>
  <assNavbar :title="`${state.comment.length}条评论`"></assNavbar>
  <view
    class="comment-box"
    :style="{height:state.height + 'px'}"
  >
    <view
      class="ss-m-b-40"
      v-for="(item,index) in state.comment"
      :key="index"
    >
      <view class="comment-user ss-flex justify-between align-center">
        <view class="comment-user-info ss-flex align-start">
          <image
            class="comment-user-info-avatar"
            :src="item.avatar ? cdnUrl(item.avatar) : 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250416/e7a91c64184dcd5646b290bf14be3b86.png'"
          >
          </image>
          <view class="user-info-text">
            <view class="user-info-text-name ss-flex align-baseline">
              {{item.nickName}}
            </view>
            <view class="user-info-text-content">{{item.content}}</view>
            <view class="user-info-text-time">{{item.createtime}} <text
                @click="reply(item)"
                class="repay-color"
              > 回复 </text>
            </view>
          </view>
        </view>
        <view class="comment-like ss-flex flex-column">
          <view @click="likes_comment(item,index,'one')">
            <uni-icons
              type="heart-filled"
              size="28"
              :color="item.is_likes === 1 ? '#E43B3D' : '#6C6E6D'"
            ></uni-icons>
          </view>
          <view class="comment-like-text">{{item.likes}}</view>
        </view>
      </view>
      <view
        class="comment-children"
        v-for="(value,page) in item.child.slice(0, item.expand ? item.child.length : 1)"
        :key="page"
      >
        <view class="comment-user ss-flex justify-between align-center">
          <view class="comment-user-info ss-flex align-start">
            <!-- <image
              class="comment-user-info-avatar"
              :src="value.avatar ?  cdnUrl(value.avatar) : 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/static/img/default_avatar.png?x-oss-process=image/resize,w_200,h_200'"
            >
            </image> -->
            <view class="user-info-text">
              <view
                class="user-info-text-name ss-flex align-baseline ss-font-24"
                style="color:#767676;"
              >
                {{value.nickName}}
              </view>
              <view
                class="user-info-text-content"
                style="font-size: 24rpx;"
              >
                <text style="color:#767676;">
                  回复{{value.to_nickName}}：
                </text>
                <text>{{value.content}}</text>
              </view>
              <view class="user-info-text-time">{{value.createtime}} <text
                  @click="reply(item)"
                  class="repay-color"
                >回复</text>
              </view>
            </view>
          </view>
          <view class="comment-like ss-flex flex-column">
            <view @click="likes_comment(value,{index:index,page:page},'two')">
              <uni-icons
                type="heart-filled"
                size="28"
                :color="value.is_likes === 1 ? '#E43B3D' : '#6C6E6D'"
              ></uni-icons>
            </view>
            <view class="comment-like-text">{{value.likes}}</view>
          </view>
        </view>
      </view>
      <view
        class="comment-omit"
        v-if="item.child.length >= 3"
        @click="expand(index)"
      >-----{{item.expand ? '收起' : '展开'}}{{item.child.length - 1}}条回复</view>
    </view>
  </view>
  <view
    style="height:260rpx;width:100%;background:#fff;"
    v-if="state.comment.length >= 8"
  ></view>
  <view class="input-box ss-flex justify-center align-center ss-safe-bottom">
    <input
      type="text"
      v-model="state.comment_text"
      :focus="state.focus"
      confirm-type='send'
      cursor-spacing="85rpx"
      :always-embed="true"
      placeholder-style="color:#A8A8A8;font-size:26rpx"
      :placeholder="state.placeholder"
      @confirm="confirm"
      @blur="blur"
    />
  </view>
</template>

<script setup>
import assNavbar from '@/components/ass-navbar.vue'
import sheep from '@/sheep';
import API from '../api'
import association from '@/association/store'
import {
  onLoad,
} from '@dcloudio/uni-app';
import {
  computed,
  reactive,
} from 'vue';
import {
  cdnUrl
} from '@/association/utils'

const state = reactive({
  height: 0,
  comment: [],
  assistants: null,
  id: '',
  comment_text: '',
  focus: false,
  placeholder: '发表您的看法',
  comment_id: 0,
  to_user_id: 0
})
const theme = computed(() => association().theme)
const userInfo = computed(() => association().userInfo)



onLoad((options) => {
  let system = uni.getSystemInfoSync()
  state.height = system.windowHeight - (sheep.$platform.device.statusBarHeight + 44)
  if (options) {
    state.id = options.find_id
    getList()
  }
})

const expand = (index) => {
  state.comment[index].expand = !state.comment[index].expand
}

const likes_comment = async (item, index, type) => {
  if (state.throttle) {
    return
  }
  state.throttle = true
  let res = await API.findCommentLike({
    comment_id: item.comment_id,
  });
  state.throttle = false
  if (res.code) {
    // 一级评论
    if (type === 'one') {
      state.comment[index].is_likes = res.data.is_like
      if (state.comment[index].is_likes) {
        state.comment[index].likes += 1;
      } else {
        state.comment[index].likes -= 1;
      }
    } else {
      // 二级评论
      state.comment[index.index].child[index.page].is_likes = res.data.is_like
      if (state.comment[index.index].child[index.page].is_likes) {
        state.comment[index.index].child[index.page].likes += 1;
      } else {
        state.comment[index.index].child[index.page].likes -= 1;
      }
    }
  }
}

const blur = () => {
  state.focus = false
  state.placeholder = `发表您的看法`
  state.comment_text = ''
  state.comment_id = 0
  state.to_user_id = 0
}

// 回复
const reply = (item) => {
  state.focus = true
  state.placeholder = `回复：${item.nickName} : 评论`
  state.comment_id = item.comment_id
  state.to_user_id = item.user_id
}

// 发表评论
const confirm = async () => {
  let params = {
    assistant_id: state.assistants.id,
    comment_id: state.comment_id, // 如果是回复就是被回复的id 
    content: state.comment_text,
    find_id: state.assistants.id,
    to_user_id: state.to_user_id
  }

  let res = await API.findComment(params);
  if (res.code == 1) {
    state.focus = false
    state.placeholder = `发表您的看法`
    state.comment_text = ''
    state.comment_id = 0
    state.to_user_id = 0

    uni.$emit('commentSet', {
      find_id: params.find_id
    })
    // 请求评论条数
    association().commonTootal({ find_id: state.id })
    uni.showToast({
      icon: 'none',
      title: '评论成功',
      duration: 1000,
    });

    getList()

  }
}


const getList = async () => {
  //获取评论列表
  const {
    code,
    data
  } = await API.getFindDetails({
    find_id: state.id,
  });
  state.comment_show = true
  if (code === 1) {
    state.comment = data.assistants.comment.map(item => {
      return {
        expand: false,
        ...item
      }
    })
    state.assistants = data.assistants
  }
}
</script>


<style lang="scss" scoped>
@import '@/association/scss/index.scss';
.repay-color {
  color: #003ad9 !important;
}

view {
  box-sizing: border-box;
}

.comment-box {
  width: 100%;
  background-color: #fff;
  padding-top: 20rpx;

  .comment-box-title {
    padding: 0 38rpx;
    margin-bottom: 40rpx;

    .comment-title-text {
      font-size: 32rpx;
      font-weight: normal;
      color: #707271;
    }
  }

  .comment-user {
    flex: 1;
    padding: 0 30rpx;

    .comment-user-info {
      .comment-user-info-avatar {
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        margin-right: 10rpx;
      }

      .user-info-text {
        flex: 1;

        .user-info-text-name {
          .tell {
            font-size: 32rpx;
            font-weight: normal;
            color: #3d3d3d;
          }
        }

        .user-info-text-content {
          font-size: 28rpx;
          font-weight: normal;
          color: #3d3d3d;
          margin-top: 5rpx;
        }

        .user-info-text-time {
          font-size: 24rpx;
          font-weight: normal;
          color: #bbbec0;
          margin-top: 5rpx;
        }
      }
    }
  }

  .comment-like {
    margin-left: 10rpx;

    .comment-like-text {
      font-size: 28rpx;
      font-weight: normal;
      color: #6c6e6d;
    }
  }
}

.input-box {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
  background-color: #fff;

  input {
    width: 710rpx;
    height: 80rpx;
    border-radius: 10rpx;
    background: #eeeeee;
    padding: 0 20rpx;
    box-sizing: border-box;
    margin-bottom: 30rpx;
  }
}

.comment-children {
  padding-left: 50rpx;
  margin-top: 10rpx;
}

.comment-omit {
  padding-left: 110rpx;
  margin-top: 10rpx;
  font-size: 24rpx;
  font-weight: normal;
  background: linear-gradient(270deg, #d184ca 0%, #f0a492 100%);
  -webkit-background-clip: text;
  color: transparent;
}
</style>